<template>
  <div id="app">
	  <router-view></router-view>
		  
	  <footer class='footer'>
			<div class='tab' v-for='(item,index) in tabs' :key='index'>
				 <router-link :to='item.path'>
					 <div class='tab_s' :class='item.class'></div>
					 <div class='tab_s'>{{item.tab}} </div>
				 </router-link>
			</div>
	  </footer>
	 <div class='go_index' v-on:touchend='go'>
	 	返回
	 </div>
  </div>
</template>

<script>
	
export default {
  data () {
    return {
        tabs:[],
    }  
  },
  methods:{
	go:function(){
		this.$router.go(-1);
	}  
  },
  created() {
     this.$http.get('/src/assets/data/tabbar.json').then(res=>{
		 console.log(res);
		 this.tabs=res.data;
	     console.log('都不容易');
	 })
  }
}
</script>

<style  lang='less'> 
	.go_index{
		position: fixed;
		z-index: 1000;
		width:50px;
		border-radius:10px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border: 1px solid black;
		background-color: white;
        color: #000000;
	}
    .footer{
		width: 100vw;
		position: fixed;
		display: flex;
		justify-content: space-around;
		bottom: 0;
		z-index: 1;
		background-color: white;
		height: 44px;
		.tab_s{
			font-size: 12px;
			height:22px;
			line-height: 22px;
			text-align: center;
		}
		
		a {
		   text-decoration: none;
		   color: black;
		}
		a:hover{
					color:red;
				}
	}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}


</style>
